<template>
    <div id = "MyPortrait">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="getMy"></i>
            <span>修改信息</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="MyPortrait-Box">
            <div class="MyPortrait-BoxHeard">
                <div class="BoxHeard">
                  <span>头像</span>
                    <img :src="urlImg" class="BoxHeard-One" v-if="urlImg"> 
                    <img :src="PortraitHeard" class="BoxHeard-One" v-else>
                    <input type="file" class="upFile" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/jpg"/>
                    <img src="../assets/Mymi/MySetRight.png" class="BoxHeard-two">
                   <!-- <div>
                        <van-uploader :after-read="afterRead"  size="20"/>
                   </div> -->
                 </div>
                <div class="BoxHeard-intimate" @click="getVeryIntimate">
                    <span>昵称</span>
                    <span>{{intimateText}}</span>
                    <img src="../assets/Mymi/MySetRight.png" class="BoxHeard-two">
                 </div>
                  <div class="BoxHeard-Sex" @click="getGender">
                    <span>性别</span>
                    <span>{{Sex}}</span>
                    <img src="../assets/Mymi/MySetRight.png" class="BoxHeard-two" >
                 </div>
            </div>
        </div>

        <!-- 上传头像预览
        <div>
            <li v-for='(value, key) in imgs'>
                <p class="img"><img :src="getObjectURL(value)"></p>
             </li>
        </div> -->
        
    </div>
</template>
<script>
import { Uploader ,Toast} from 'vant';
export default {
    name:"MyPortrait",
    data() {
        return {
            PortraitHeard:require("@/assets/Mymi/village.png"),// require("@/assets/Mymi/village.png"),
            intimateText:"",
            PortraitSex:"0",
            MyPortraitUserId:"",

            formData:new FormData(),
	        imgs: {},
            imgLen:0,

            urlImg:""
        }
    },
    created(){
        //取出本地会话信息
       var list = JSON.parse(localStorage.getItem("key")).userId;
       this.urlImg =localStorage.getItem("imgperson")
       this.MyPortraitUserId = list;
    //    this.AmendingPage();
    },
    computed: {
        Sex(){
            var sexName= localStorage.getItem("sexType");
            return sexName== "0" ? "男" : "女";
        }
    },
    methods: {
       getMy(){
            this.$router.push("/Mymi");
        },
        getVeryIntimate(){
            this.$router.push({path:"/VeryIntimate",query:{intimateText:this.intimateText}});
        },
        getGender(){
            this.$router.push({path:"/Gender",query:{PortraitSex:this.PortraitSex}});
        },
      
        //头像上传
        //通过DOM取文件数据，将图片压缩，并限制上传数量
        addImg(event){
            // this.imgs = [];
	        let inputDOM = this.$refs.inputer;
	        // 通过DOM取文件数据
	        this.fil = inputDOM.files;
	        let oldLen=this.imgLen;
	        let len=this.fil.length+oldLen;
	        if(len>1){
	        //   alert('最多可上传1张，您还可以上传'+(1-oldLen)+'张');
	          return false;
            }
	        for (let i=0; i < this.fil.length; i++) {
	          let size = Math.floor(this.fil[i].size / 1024);
	          if (size > 5*1024*1024) {
	            // alert('请选择5M以内的图片！');
	            return false
	          }
              this.imgLen++;
	          this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
            }
			this.submit();
        },
        //图片预览
        getObjectURL(file) {
	        var url = null ;
	        if (window.createObjectURL!=undefined) { // basic
	          url = window.createObjectURL(file) ;
	        } else if (window.URL!=undefined) { // mozilla(firefox)
	          url = window.URL.createObjectURL(file) ;
	        } else if (window.webkitURL!=undefined) { // webkit or chrome
	          url = window.webkitURL.createObjectURL(file) ;
            }
	        return url ;
        },
        //上传图片
        submit(){
	        for(let key in this.imgs){
	           let name=key.split('?')[0];
               this.formData.append('file',this.imgs[key],name);
            }
            // console.log("this.formData",this.formData)
            this.$axios.post('/cct/qny/uploading', this.formData,
            ).then(res => {
                console.log("上传成功",res)
                this.urlImg = res.data.data;
                localStorage.setItem("imgperson",res.data.data)
	        });
        }, 
      
          //加载页面修改信息
        AmendingPage(){
            this.$axios.post("/system/user/userDetails", {
                userId:this.MyPortraitUserId
            })
            .then(res => {
                // console.log("加载页面信息",res);
                let url = window.domain;
                this.PortraitHeard = url + res.data.data.user.avatar;
                this.intimateText =  res.data.data.user.userName;
                this.PortraitSex =  res.data.data.user.sex;
            });
        },
    },
    
}
</script>
<style lang="less" scoped>
#MyPortrait{
    width: 100%;
    height: 100%;
    background: rgb(248, 248, 248);
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333333;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        background: #FFFFFF
    }
    .MyPortrait-Box{
        width: 100%;
        height: 3.62rem;
        margin-top: .12rem;
        background: white;
        .MyPortrait-BoxHeard{
            width: 100%;
            height: 1.5rem;
            .BoxHeard{
                width: 100%;
                height: 1rem;
                font-size: .32rem;
                line-height: 1rem;
                display: flex;
                border-bottom: .02rem solid rgb(206, 206, 206);
                position: relative;
                span{
                    margin-left: .42rem;
                }
                .BoxHeard-One{
                    width: .88rem;
                    height: .88rem;
                    margin-left: 4.4rem;
                    border-radius: 0.5rem;
                    // border: 1px solid red;
                }
                .upFile{
                    width: 0.88rem;
                    height: 0.88rem;
                    border-radius: 0.5rem;
                    opacity: 0;
                    border: 1px solid red;
                    position: absolute;
                    top:0;
                    left:5.43rem;
                }
                .BoxHeard-two{
                    width: .26rem;
                    height: .26rem;
                    margin-left: .26rem;
                    margin-top: .39rem;
                }
            } 
            .BoxHeard-intimate{
                width: 100%;
                height: 1.06rem;
                font-size: .32rem;
                line-height: 1.06rem;
                display: flex;
                border-bottom: .02rem solid rgb(206, 206, 206);
                span:nth-child(1){
                     margin-left: .42rem;
                }
                span:nth-child(2){
                    width: 5.38rem;
                    height: 1.06rem;
                    text-align: right;
                }
                img{
                    width: .26rem;
                    height: .26rem;
                    margin-left: .18rem;
                    margin-top: .39rem;
                }
            }
             .BoxHeard-Sex{
                width: 100%;
                height: 1.06rem;
                font-size: .32rem;
                line-height: 1.06rem;
                display: flex;
                border-bottom: .02rem solid rgb(206, 206, 206);
                span:nth-child(1){
                     margin-left: .42rem;
                }
                span:nth-child(2){
                    width: .96rem;
                    height: 1.06rem;
                    margin-left: 4.4rem;
                    text-align: center;
                }
                img{
                    width: .26rem;
                    height: .26rem;
                    margin-left: .18rem;
                    margin-top: .39rem;
                }
            }

        }
         
    }
}
</style>